<!--
 * @Author: your name
 * @Date: 2021-08-16 17:35:45
 * @LastEditTime: 2021-08-18 16:05:10
 * @Description:
-->
<template>
<svg-icon :icon-class="isFullscreen ? 'exit-screenfull' : 'screenfull'" @click="click" />
</template>

<script lang="ts" setup>
import screenfull from 'screenfull'
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'

const isFullscreen = ref(false)

const change = ():void => {
  isFullscreen.value = screenfull.isFullscreen
}

const init = ():void => {
  if (screenfull.enabled) {
    screenfull.on('change', change)
  }
}

const destroy = ():void => {
  if (screenfull.enabled) {
    screenfull.off('change', change)
  }
}

const click = ():void => {
  if (!screenfull.enabled) {
    ElMessage.warning('you browser can not work')
    return false
  }
  screenfull.toggle()
}

onMounted(() => {
  init()
})
</script>
